<template>
  <section>
    <div class="pay_box">
      <div
        class="cost-button"
        v-for="(item, index) in sourceList"
        :class="{ cost_active: flog == index }"
        :key="index"
        @click="changeSource(item.id, index)"
      >
        {{ item.desc }}
      </div>
    </div>
    <div>
      <div class="pay_box">
        <el-form>
          <el-form-item label="筛选：">
            <el-date-picker
              v-model="form.startTime"
              class="pay_date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间"
            ></el-date-picker
            >----
            <el-date-picker
              style="marigin-left:2%;"
              v-model="form.endTime"
              class="pay_date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间"
            ></el-date-picker>
            <doctorSearch
              v-model="form.sourceCode"
              v-if="form.type === 1"
              style="width:200px;margin-right:10px;"
            ></doctorSearch>
            <el-input
              v-model="form.sourceName"
              v-if="form.type === 5 || form.type === 6"
              style="width:200px;margin-right:10px;"
              clearable
              placeholder="请输入来源详细"
            ></el-input>
            <el-select
              v-model="form.sourceCode"
              v-if="form.type !== 1 && form.type !== 5 && form.type !== 6"
              filterable
              remote
              style="width:200px;margin-right:10px;"
              reserve-keyword
              :remote-method="getAllOrganization"
              clearable
              placeholder="请选择具体来源"
            >
              <el-option
                v-for="(item, index) in orgList"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
            <el-button
              type="primary"
              circle
              icon="el-icon-search"
              @click="getData()"
            ></el-button>
            <el-button
              type="primary"
              style="float:right;"
              @click="exportExcel()"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="pay_box">
        <table class="table-box">
          <thead>
            <tr>
              <th>名称</th>
              <th>诊疗费</th>
              <th>套餐</th>
              <th>西药费</th>
              <th>实验室检查</th>
              <th>辅助检查</th>
              <th>治疗</th>
              <th>材料费</th>
              <th>其他</th>
              <th>合计</th>
              <th>收费时间</th>
              <th>科室</th>
              <th>具体来源</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableList" :key="index">
              <td>{{ item.patientName }}</td>
              <td>{{ item.zhenLiao }}</td>
              <td>{{ item.packagePrice }}</td>
              <td>{{ item.xiYao }}</td>
              <td>{{ item.check }}</td>
              <td>{{ item.fuzhu }}</td>
              <td>{{ item.zhiliao }}</td>
              <td>{{ item.cailiao }}</td>
              <td>{{ item.other }}</td>
              <td>{{ item.allAmount }}</td>
              <td>{{ item.createTime | changeTime }}</td>
              <td>{{ item.deptName }}</td>
              <td>{{ item.channelDetail }}</td>
              <td>
                <el-link @click="getDetail(item)">查看详情</el-link>
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <pager v-model="pager" @change-pagenum="getData"></pager>
      </div>
    </div>
  </section>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    return {
      sourceList: [],
      flog: 0,
      tableList: [],
      form: {
        type: "",
        tjDoctorId: "",
        sourceName:'',
        sourceCode:'',
        startTime: "",
        endTime: ""
      },
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orgList: []
      //   activeName:''
    };
  },
  created() {
    this.form.startTime = this.getDate();
    this.form.endTime = this.getNewDate();
  },
  components: {
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue")
  },
  mounted() {
    const th = this;
    let fn = async function() {
      // th.payStatusEnum = await th.("支付状态");
      th.sourceList = await th.getCommonConfigByKey("推荐来源");
      th.form.type = th.sourceList[0].id;
      th.getData(th.form.type, 0);
      th.getAllOrganization();
    };
    fn();
  },
  methods: {
    changeSource(type, index) {
      this.flog = index;
      this.form.type = type;
      this.form.tjDoctorId = "";
      this.form.sourceCode = "";
      this.getData();
      this.getAllOrganization();
    },
    getData(type) {
      if (type) {
        this.pager.pageNum = type;
      } else {
        type = 1;
      }
      let json={};
      json = Object.assign(json, this.form, this.pager);
      this.$api.patientSourceStatistics(json).then(res => {
        if (res.executed) {
          this.tableList = res.dataBody.list;
          this.pager.total = res.dataBody.total;
        }
      });
    },
    exportExcel() {
      let json = { pageNum: 1, pageSize: 500
      // hpId: this.adminUser.hpId 
      };
      json = Object.assign(json, this.form);
      this.$api.patientSourceStatistics(json).then(res => {
        if (res.executed) {
          let list = res.dataBody.list;
          Excel(
            list,
            [
              { key: "patientName", name: "姓名" },
              { key: "zhenLiao", name: "诊疗费" },
              { key: "packagePrice", name: "套餐" },
              { key: "xiYao", name: "西药" },
              { key: "check", name: "实验室检查" },
              { key: "fuzhu", name: "辅助检查" },
              { key: "zhiliao", name: "治疗" },
              { key: "cailiao", name: "材料" },
              { key: "other", name: "其他" },
              { key: "allAmount", name: "合计" },
              { key: "createTime", name: "收费时间" },
              { key: "deptName", name: "科室" },
               {key:"channelDetail",name:"具体来源"}
            ],
            "推荐来源明细"
          );
        }
      });
    },
    getDetail(obj) {
      //获取详情
      let th = this;
      let j = {};
      if (obj != null) {
        if (obj.channel == 1) {
          j = {
            id: th.jiaMi(obj.channelId),
            total: obj.allAmount,
            type: 1,
            orderId: obj.orderId,
            patientId: th.jiaMi(obj.patientId)
          };
        } else {
          j = {
            id: th.jiaMi(obj.orderId),
            total: obj.allAmount,
            type: 1,
            orderId: obj.orderId,
            patientId: th.jiaMi(obj.patientId)
          };
        }
      } else {
        j = {
          id: th.jiaMi(0)
        };
      }
      let urlJson = th.$utils.JsonToUrl(j);
      th.addNavMenu(
        "收费详情",
        "/page/chargeParticulars?" + urlJson,
        "chargeParticulars"
      );
      th.$router.push({
        path: "/page/chargeParticulars",
        query: th.getUrlToken(j)
      });
    },
    getAllOrganization(query) {
      this.$api
        .findOrganizationAll({
          type: this.form.type,
          pageNum: 1,
          hpId: this.adminUser.hpId,
          pageSize: 20,
          name: query
        })
        .then(res => {
          if (res.executed) {
            this.orgList = res.dataBody.list;
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin: 10px 0px;
  display: inline-block;
  width: 100%;
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.cost-button {
  display: inline-block;
  width: 120px;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  height: 34px;
  line-height: 32px;
}
.cost_active {
  border-color: #1ab394;
  color: #1ab394;
}
</style>
